<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <div th:fragment="header-css">

        <title>Spring Boot Blog</title>

        <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
              th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"
              rel="stylesheet" media="screen"/>

        <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
                th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script>

        <link rel="stylesheet" th:href="@{/css/main.css}"
              href="../../css/main.css"/>
    </div>
</head>
<body>
<div th:fragment="header">
    <!-- this is header -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" th:href="@{/home}">Blog App</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse navbar-right">
                <!-- show registration only if user is not yet authenticated -->
                <ul class="nav navbar-nav" sec:authorize="!isAuthenticated()">
                    <li class="active"><a th:href="@{/registration}">Registration</a></li>
                </ul>
                <!-- show login only if user is not yet authenticated -->
                <ul class="nav navbar-nav" sec:authorize="!isAuthenticated()">
                    <li class="active"><a th:href="@{/login}">Login</a></li>
                </ul>
                <!-- show My Blog only if user is authenticated -->
                <ul class="nav navbar-nav" sec:authorize="hasRole('USER')">
                    <li class="active"><a th:href="@{'/blog/' + ${#authentication.getName()}}">My Blog</a></li>
                </ul>
                <!-- show new post only if user is authenticated -->
                <ul class="nav navbar-nav" sec:authorize="hasRole('USER')">
                    <li class="active"><a th:href="@{/newPost}">New Post</a></li>
                </ul>
                <!-- show sign out only if user is authenticated -->
                <ul class="nav navbar-nav" sec:authorize="isAuthenticated()">
                    <li class="active"><a th:href="@{/logout}">Sign Out</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

</body>
</html>